<template>
	<view class="pages">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view :style="'height:' + statusBarHeight + 'px'"></view>
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<uni-icons type="arrow-left" size="24" color="#333333"></uni-icons>
				</view>
				<text class="navbar-title">新品推荐</text>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 顶部搜索栏 -->
		<view class="search-box" id="searchBox">
			<uni-search-bar cancelButton="none" placeholder="搜索商品" v-model="words" bgColor="#FFFFFF" @confirm="search"
				@input="onSearchInput" class="custom-search-bar" />
		</view>

		<!-- 商品列表 -->
		<scroll-view class="goods-list" :scroll-y="true" @scrolltolower="loadmore" :lower-threshold="100">
			<view class="list-container">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="openDetail(item.id)">
					<!-- 商品图片容器 -->
					<view class="image-wrapper">
						<image :src="getimg(item.image || item.images)" class="goods-image" mode="aspectFill"
							lazy-load />
						<!-- 新品角标 -->
						<view class="new-badge">
							<text class="new-text">NEW</text>
						</view>
					</view>

					<!-- 商品信息 -->
					<view class="goods-info">
						<text class="goods-title">{{ item.title }}</text>

						<!-- 规格信息 -->
						<view class="spec-row" v-if="item.guige">
							<text class="spec-label">规格：</text>
							<text class="spec-value">{{ item.guige }}</text>
						</view>

						<!-- 价格和分享奖励行 -->
						<view class="price-row">
							<view class="price-box">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ item.s_price }}</text>
								<text class="price-unit" v-if="item.danweip">/{{ item.danweip }}</text>
							</view>
							<!-- 分享赚奖励替换已购买人数 -->
							<button open-type="share" catchtap="emptyFunction" :data-id="item.id" :data-title="item.title"
								:data-img="item.image || item.images" class="share-tag"
								@click.stop="shareProduct(item)"
								v-if="item.commission">
								<uni-icons type="redo" size="18" color="#FF6B6B"></uni-icons>
								<text class="reward-text">分享赚¥{{ item.commission }}</text>
							</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="!loading && goodsList.length === 0" class="empty-state">
				<view class="empty-icon">🎁</view>
				<text class="empty-text">暂无新品推荐</text>
				<text class="empty-tip">敬请期待更多精彩商品</text>
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="loading-box">
				<uni-load-more status="loading"></uni-load-more>
			</view>

			<!-- 没有更多 -->
			<view v-if="!haveMore && goodsList.length > 0" class="no-more">
				<text class="no-more-text">没有更多了~</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $util from "@/util/util.js"

	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				words: '', // 搜索关键词
				goodsList: [], // 商品列表
				page: 1, // 当前页码
				loading: false, // 加载状态
				haveMore: true, // 是否还有更多数据
				searchTimer: null, // 搜索防抖定时器
			}
		},

		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.initData()
		},

		onShow() {
			// 页面显示时刷新数据
			this.refreshData()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.refreshData()
		},
		onShareAppMessage(res) {
			console.log(res)
			if (res.from === 'button') {
				// 获取按钮上设置的 data-* 属性
				const dataset = res.target.dataset
			
				let imgUrl = this.getimg(dataset.img)
				return {
					title: dataset.title,
					path: '/pages/memberinfo/sharelist/sharedetail?id=' + dataset.id,
					imageUrl: imgUrl
				}

			}
		},
		methods: {
			// 初始化数据
			initData() {
				this.getGoodsList()
			},

			// 刷新数据
			refreshData() {
				this.page = 1
				this.goodsList = []
				this.haveMore = true
				this.getGoodsList()
			},

			// 获取商品列表
			getGoodsList(loadMore = false) {
				if (this.loading) return

				this.loading = true

				if (!loadMore) {
					$util.showProgress()
				}

				$util.ajax({
					url: 'Mall/get_list',
					lei: 0,
					words: this.words,
					page: this.page,
					member: 1,
					is_recommend: 1
				}, (res) => {
					$util.hideProgress()
					uni.stopPullDownRefresh()
					this.loading = false

					if (res.code == 1 && res.data && res.data.length > 0) {
						if (loadMore) {
							this.goodsList = this.goodsList.concat(res.data)
						} else {
							this.goodsList = res.data
						}
						this.page += 1
					} else {
						this.haveMore = false
						if (!loadMore) {
							this.goodsList = []
						}
					}
				}, () => {
					$util.hideProgress()
					uni.stopPullDownRefresh()
					this.loading = false
				})
			},

			// 搜索输入处理
			onSearchInput(value) {
				// 防抖处理，避免频繁请求
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.refreshData()
				}, 500)
			},

			// 搜索确认
			search(value) {
				clearTimeout(this.searchTimer)
				this.refreshData()
			},

			// 加载更多
			loadmore() {
				if (this.haveMore && !this.loading) {
					this.getGoodsList(true)
				}
			},

			// 打开商品详情
			openDetail(id) {
				$util.openwin('/pages/memberinfo/sharelist/sharedetail?id=' + id)
			},

			// 获取图片
			getimg(path) {
				return $util.get_img(path)
			},

			// 返回
			goBack() {
				uni.navigateBack()
			},

			// 分享商品
			shareProduct(item) {
				console.log('空事件，用于阻止冒泡')
				console.log('分享商品', item);
				
				// 检查登录
				if (!$util.isLogin()) {
					console.log('用户未登录');
					$util.login();
					return;
				}

				// // #ifdef MP-WEIXIN
				// try {
				// 	// 使用showShareMenu显示分享菜单
				// 	if (typeof uni.showShareMenu === 'function') {
				// 		console.log('调用showShareMenu显示分享菜单');
				// 		uni.showShareMenu({
				// 			withShareTicket: true,
				// 			menus: ['shareAppMessage'], // 只显示微信好友分享选项
				// 			success: (res) => {
				// 				console.log('分享菜单显示成功', res);
				// 				$util.toast('请点击分享给好友');
				// 			},
				// 			fail: (err) => {
				// 				console.error('分享菜单显示失败', err);
				// 				$util.toast('分享功能暂不可用');
				// 			}
				// 		});
				// 	} else {
				// 		$util.toast('分享功能暂不可用');
				// 	}
				// } catch (error) {
				// 	console.error('分享调用异常', error);
				// 	$util.toast('分享异常，请重试');
				// }
				// // #endif

				// // #ifndef MP-WEIXIN
				// // 非微信环境提示
				// $util.toast('请在微信中打开分享功能');
				// // #endif
			}
		}
	}
</script>

<style scoped>
	.pages {
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100vw;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		z-index: 1000;
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
		box-sizing: border-box;
	}

	.navbar-content {
		width: 100%;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.navbar-left {
		width: 80rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.navbar-title {
		flex: 1;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		text-align: center;
		letter-spacing: 1rpx;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	.navbar-right {
		width: 80rpx;
	}

	/* 搜索栏 */
	.search-box {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: calc(var(--status-bar-height) + 66rpx + 80rpx);
		/* #endif */
		/* #ifndef MP-WEIXIN */
		top: calc(var(--status-bar-height) + 80rpx);
		/* #endif */
		left: 0;
		width: 100%;
		max-width: 100vw;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(5px);
		padding: 20rpx;
		z-index: 999;
		box-sizing: border-box;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
	}

	.custom-search-bar {
		border-radius: 30rpx;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	/* 商品列表 */
	.goods-list {
		width: 100%;
		max-width: 100vw;
		min-height: 100vh;
		padding: 0 20rpx 20rpx;
		background: transparent;
		box-sizing: border-box;
		overflow-x: hidden;
		/* #ifdef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) + 8rpx + 130rpx);
		margin-top: calc(var(--status-bar-height) + 8rpx + 130rpx);
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) + 8rpx + 120rpx);
		margin-top: calc(var(--status-bar-height) + 8rpx + 120rpx);
		/* #endif */
	}

	.list-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 15rpx;
	}

	.goods-item {
		width: 100%;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
		transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
		box-sizing: border-box;
		transform: translateZ(0);
		backdrop-filter: blur(5px);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	.goods-item:active {
		transform: translateY(-8rpx) scale(1.01);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
		transition: all 0.2s ease;
	}

	.image-wrapper {
		position: relative;
		width: 100%;
		padding-top: 100%;
		overflow: hidden;
	}

	.goods-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
		transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
		object-fit: cover;
	}

	.goods-item:active .goods-image {
		transform: scale(1.05);
	}

	.new-badge {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background: linear-gradient(135deg, #FF6B6B, #FF8E53);
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
		z-index: 10;
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
			transform: scale(1);
		}

		50% {
			box-shadow: 0 4px 16px rgba(255, 107, 107, 0.5);
			transform: scale(1.05);
		}

		100% {
			box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
			transform: scale(1);
		}
	}

	.new-text {
		font-size: 22rpx;
		color: #ffffff;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.goods-info {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.goods-title {
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
		height: 88rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-weight: 500;
		word-break: break-all;
		margin-bottom: 16rpx;
	}

	/* 规格信息 */
	.spec-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10rpx;
		padding: 8rpx 12rpx;
		background: rgba(245, 247, 250, 0.7);
		border-radius: 16rpx;
	}

	.spec-label {
		font-size: 24rpx;
		color: #666666;
		font-weight: 500;
	}

	.spec-value {
		font-size: 24rpx;
		color: #333333;
		font-weight: 700;
		margin-left: 10rpx;
	}

	.price-row {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 10rpx;
		box-sizing: border-box;
	}

	.price-box {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 26rpx;
		color: #FF6B6B;
		font-weight: 600;
	}

	.price-value {
		font-size: 42rpx;
		color: #FF6B6B;
		font-weight: 700;
		margin-left: 4rpx;
		text-shadow: 0 1px 2px rgba(255, 107, 107, 0.2);
	}

	.price-unit {
		font-size: 26rpx;
		color: #FF6B6B;
		margin-left: 4rpx;
		font-weight: 500;
	}

	/* 分享奖励 */
	.share-tag {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12rpx 24rpx;
		background: linear-gradient(135deg, #FFF5F5, #FFE8E8);
		border-radius: 30rpx;
		max-width: 100%;
		box-sizing: border-box;
		width: fit-content;
		box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.share-tag::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transition: 0.5s;
	}

	.share-tag:hover::before {
		left: 100%;
	}

	.share-tag:active {
		transform: scale(0.95);
		box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
	}

	.reward-text {
		font-size: 24rpx;
		color: #FF6B6B;
		margin-left: 10rpx;
		font-weight: 600;
		letter-spacing: 0.5rpx;
	}

	.commission-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10rpx;
	}

	.commission-label {
		font-size: 24rpx;
		color: #333333;
		font-weight: 500;
	}

	.commission-value {
		font-size: 24rpx;
		color: #333333;
		font-weight: 700;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
		animation: bounce 2s infinite;
	}

	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-20rpx);
		}

		60% {
			transform: translateY(-10rpx);
		}
	}

	.empty-text {
		font-size: 32rpx;
		color: #666666;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	.empty-tip {
		font-size: 26rpx;
		color: #999999;
	}

	/* 加载状态 */
	.loading-box {
		padding: 40rpx 0;
		display: flex;
		justify-content: center;
	}

	.no-more {
		padding: 40rpx 0;
		display: flex;
		justify-content: center;
	}

	.no-more-text {
		font-size: 24rpx;
		color: #999999;
	}
	/* 在 App.vue 的 style 标签中，或全局 CSS 文件中 */
	/* 重置按钮的基本样式 */
	button {
	  border: none !important; /* 取消边框 */
	  background-color: transparent !important; /* 背景透明 */
	  padding: 0 !important; /* 取消内边距 */
	  margin: 0 !important; /* 取消外边距 */
	  border-radius: 0 !important; /* 取消圆角 */
	  font-size: inherit; /* 继承父元素字体 */
	  line-height: inherit; /* 继承父元素行高 */
	}
	
	/* 关键：清除小程序按钮通过伪元素添加的边框 */
	button::after {
	  border: none !important; /* 必须设置伪元素的边框为 none */
	  border-radius: 0 !important; /* 如果需要，也清除伪元素的圆角 */
	}
</style>